<template>
  <div>
    <card :isCustomHeader="true">
      <template #header>
        <t-breadcrumb :maxItemWidth="'200'">
          <t-breadcrumbItem>企业管理</t-breadcrumbItem>
          <t-breadcrumbItem><b>企业信息</b></t-breadcrumbItem>
        </t-breadcrumb>
        <t-button v-if="isEdit" @click="isEdit = false">编辑</t-button>
        <t-space v-else>
          <t-button @click="save(0)" theme="default" variant="outline">取消</t-button>
          <t-button @click="save(1)">保存</t-button>
        </t-space>
      </template>
      <div class="form">
        <t-form labelAlign="top" :data="formData" ref="form" :colon="true" style="width: 40vw">
          <t-form-item label="企业全称" :rules="requiredRules" clearable showClearIconOnEmpty>
            <t-input v-model="formData.companyName" :readonly="isEdit" :disabled="isEdit"></t-input>
            <upload theme="custom" :disabled="isEdit" @returnRes="editAvatar">
              <template slot="pic">
                <t-avatar size="100px" class="img" :image="logo"></t-avatar>
              </template>
            </upload>
          </t-form-item>
          <t-form-item label="所属行业" clearable showClearIconOnEmpty>
            <t-select
              v-model="formData.jobTitle"
              :disabled="isEdit"
              :options="vocationOptions"
              :readonly="isEdit"
              clearable
            />
          </t-form-item>
          <t-form-item label="规模" clearable showClearIconOnEmpty>
            <t-select
              v-model="formData.scale"
              :disabled="isEdit"
              :options="scaleOptions"
              :readonly="isEdit"
              clearable
            />
          </t-form-item>
          <t-form-item label="企业所在地" clearable showClearIconOnEmpty>
            <t-select
              v-model="formData.area"
              :disabled="isEdit"
              :options="addressOptions"
              :readonly="isEdit"
              clearable
            />
          </t-form-item>
          <t-form-item label="公司地址" clearable showClearIconOnEmpty>
            <t-input v-model="formData.address" :readonly="isEdit" :disabled="isEdit">
              <template #prefix-icon>
                <location-icon />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item label="备注" clearable showClearIconOnEmpty>
            <t-textarea v-model="formData.remark" placeholder="请输入备注内容" :readonly="isEdit" :disabled="isEdit" />
          </t-form-item>
        </t-form>
      </div>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card/index.vue';
import Upload from '@/components/Upload/index.vue';
import { FILE_URL_PREFIX } from '@/constants';
import { LocationIcon } from 'tdesign-icons-vue';
import logo from '@/assets/business/logo.png';
import { gettBusinessInfo, subBusinessInfo, changeAvatar } from '@/service/business-management/business-info/index';

const INITIAL_DATA = {
  companyName: '', // 企业全称
  jobTitle: '', // 所属行业
  scale: '', // 规模
  area: '', // 企业所在地
  address: '', // 地址
  remark: '', // 备注
};
export default {
  name: 'BusinessManagementEnterpriseInfo',
  components: {
    Card,
    LocationIcon,
    Upload,
  },
  data() {
    return {
      visible: false,
      companyInfo: '', // 企业信息
      logo,
      isEdit: true, // 控制 是否可编辑
      formData: { ...INITIAL_DATA },
      requiredRules: [{ required: true, message: '企业名称必填' }],
      vocationOptions: [
        { label: '软件和信息服务', value: '软件和信息服务' },
        { label: '电子商务', value: '电子商务' },
        { label: '金融', value: '金融' },
        { label: '医疗', value: '医疗' },
        { label: '汽车', value: '汽车' },
        { label: '交通', value: '交通' },
        { label: '能源', value: '能源' },
        { label: '电力', value: '电力' },
        { label: '制造业', value: '制造业' },
        { label: '教育培训', value: '教育培训' },
        { label: '文化教育', value: '文化教育' },
        { label: '大众媒体', value: '大众媒体' },
      ],
      scaleOptions: [
        { label: '0~19人', value: 1 },
        { label: '20~99人', value: 2 },
        { label: '100~499人', value: 3 },
        { label: '500~999人', value: 4 },
        { label: '1000~9999人', value: 5 },
      ],
      addressOptions: [
        { label: '中国大陆（内地）', value: 1 },
        { label: '中国港澳台地区', value: 2 },
        { label: '境外其他国家/地区', value: 3 },
      ],
    };
  },
  mounted() {
    this.getCompanyMsg();
  },
  methods: {
    // 获取企业信息
    async getCompanyMsg(e) {
      if (e !== 1) {
        const res = await gettBusinessInfo();
        this.companyInfo = res.data;
      }
      const { name, industry, scale, area, address, remark, avatar } = this.companyInfo;
      this.logo = avatar || this.logo;
      this.formData.companyName = name;
      this.formData.jobTitle = industry;
      this.formData.scale = scale;
      this.formData.area = area;
      this.formData.address = address;
      this.formData.remark = remark;
    },
    // 保存
    async save(val) {
      if (val) {
        const { orgId } = this.$store.state.user.userInfo;
        const { address, area, remark, jobTitle, companyName, scale } = this.formData;
        if (!companyName) {
          this.$message.warning('填写');
          return;
        }
        const sysOrg = {
          address,
          area,
          comment: remark,
          id: orgId,
          industry: jobTitle,
          name: companyName,
          scale,
          status: 0,
        };
        const res = await subBusinessInfo(sysOrg);

        const avatarRes = await changeAvatar({
          avatar: this.logo,
          id: this.companyInfo.id,
        });
        if (avatarRes.code === 200) {
          this.logo = this.path;
        }
        if (res.code === 200 && avatarRes.code === 200) this.$message.success('保存成功');
      }
      this.getCompanyMsg();
      this.isEdit = true;
    },
    // 编辑
    // 更改企业头像
    changeAvatar() {
      // alert('更改');
    },
    async editAvatar(path) {
      if (!path) return;
      if (!this.isImageType(path)) {
        this.$message.warning('请上传图片类型');
        return;
      }
      path = FILE_URL_PREFIX + path;
      this.logo = path;
    },
    isImageType(str) {
      const type = str.split('.').pop();
      // toLowerCase() 将字符串转换为小写，返回一个新的字符串
      return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(type.toLowerCase()) !== -1;
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  display: flex;
  justify-content: center;
  padding-bottom: 100px;
  .img {
    width: 100px;
  }
}

/deep/.t-upload {
  float: right;
}
/deep/.t-upload__dragger {
  border: none;
  width: 144px;
}
/deep/.files-upload {
  height: 120px;
}
</style>
